import React, { useState } from "react";
import { NavLink } from "react-router-dom";
import {
  AppstoreOutline,
  CompassOutline,
  VideoOutline,
  UserOutline,
} from "antd-mobile-icons";
import "./foodList.modules.less";

export default function FoodList() {
  const [isActive, setisActive] = useState(0);
  const [nvaList] = useState([
    {
      title: "首页",
      icon: <AppstoreOutline style={{ fontSize: 28 }} />,
      path: "/",
    },
    {
      title: "问答",
      icon: <CompassOutline style={{ fontSize: 28 }} />,
      path: "/ask",
    },
    {
      title: "视频",
      icon: <VideoOutline style={{ fontSize: 28 }} />,
      path: "/video",
    },
    {
      title: "我的",
      icon: <UserOutline style={{ fontSize: 28 }} />,
      path: "/mine",
    },
  ]);
  return (
    <div className="footer-wrapper">
      {nvaList.map((item, idx) => {
        return (
          <span className="footer-item" key={item.path}>
            <NavLink
              to={item.path}
              className={({ isActive }) => (isActive ? "active" : "")}
            >
              {item.icon}
              <span>{item.title}</span>
            </NavLink>
          </span>
        );
      })}
    </div>
  );
}
